<script setup lang='ts'>
import { propObj } from './props';
import { ref } from "vue";
defineOptions({
  name: 'VtButton',
})

const _ref = ref<null | Element>(null)
defineExpose({
  ref: _ref
})

defineProps(propObj)
</script>

<template>
  <button class="vt-button" ref="_ref" :disabled="disabled || loading"
    :class="{ [`vt-button--${type}`]: type, 'is-plain': plain, 'is-round': round, 'is-circle': circle, 'is-disabled': disabled || loading, 'is-loading': loading }">
    <!-- 图标区域 -->
    <template v-if="(icon || loading) && !$slots.loading">
      <vt-icon class="vt-button__icon" :icon="icon" v-if="icon && !loading" />
      <vt-icon class="vt-button__icon" :icon="loadingIcon" spin v-if="loading" />
    </template>
    <!-- loading 插槽 -->
    <slot name="loading" v-if="loading && $slots.loading"></slot>
    <!-- 内容区域 -->
    <slot v-if="!circle"></slot>
  </button>
</template>

<style scoped lang='scss'></style>